<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>Sign in &laquo; Admin</title>
    <link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/css/admin.css">
    <style>
        .form-group div {
            height: 8px;
        }
        
        .form-group span {
            font-size: 8px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="login">
        <div class="login-wrap">
            <img class="avatar" src="../assets/img/default.png">
            <!-- 有错误信息时展示 -->
            <!-- <div class="alert alert-danger">
        <strong>错误！</strong> 用户名或密码错误！
      </div> -->
            <div class="form-group">
                昵称<label for="nickName" class="sr-only">请设置一个账户昵称</label>
                <input id="nickName" type="nickName" class="form-control" oninput="regnickName()" placeholder="请设置一个账户昵称" autofocus>
                <div><span id="prompt1"></span></div>
            </div>
            <div class="form-group">
                邮件<label for="email" class="sr-only">请使用常用的邮箱账号</label>
                <input id="email" type="email" class="form-control" oninput="regEmail()" placeholder="请使用常用的邮箱账号" autofocus>
                <div><span id="prompt2"></span></div>
            </div>
            <div class="form-group">
                密码<label for="password" class="sr-only">设置登录密码</label>
                <p style="font-size: 10px">至少8-16个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符</p>
                <input id="password" type="password" class="form-control" oninput="regpassword()" placeholder="设置登录密码">
                <div><span id="prompt3"></span></div>
            </div>
            <div class="form-group">
                确认密码<label for="password" class="sr-only">请确认登录密码</label>
                <input id="password2" type="password" class="form-control" oninput="comparePass()" placeholder="请确认登录密码">
                <div><span id="prompt4"></span></div>
            </div>
            <button class="btn btn-primary btn-block" id="loginBtn2">注册</button>
        </div>
    </div>
    <script src="../assets/vendors/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(function() {

            })
            //email 表单验证


        function regEmail() {
            var email = document.getElementById("email").value;

            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if (reg.test(email)) {
                document.getElementById('prompt2').innerHTML = ""
            } else {
                document.getElementById('prompt2').innerHTML = '邮箱格式不正确'

            }

        }

        //nickName 表单验证
        function regnickName() {
            var nickName = document.getElementById("nickName").value;

            var reg = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
            if (reg.test(nickName)) {
                document.getElementById('prompt1').innerHTML = ""
            } else {
                document.getElementById('prompt1').innerHTML = "昵称格式不正确"

            }
        }
        //password 表单验证
        function regpassword() {
            var password = document.getElementById("password").value;

            var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{8,16}$/;
            if (reg.test(password)) {
                document.getElementById('prompt3').innerHTML = ""
            } else {
                document.getElementById('prompt3').innerHTML = "密码格式不正确"
            }
            if ($("#password2").val()) {
                comparePass()
            }

        }

        function comparePass() {
            var password = document.getElementById("password").value;
            var password2 = document.getElementById("password2").value;
            if (password != password2) {
                document.getElementById('prompt4').innerHTML = "两次密码输入不一致"


            } else {
                document.getElementById('prompt4').innerHTML = ""
                return;
            }
        }




        // 选择登录按钮并为其添加点击事件
        $('#loginBtn2').on('click', function(e) {
            //获取用户输入的昵称
            e.preventDefault();
            var nickName = $('#nickName').val();

            // 获取用户输入的邮箱地址
            var email = $('#email').val();
            // 获取用户输入的密码
            var password = $('#password').val();
            var role = "normal";
            var status = "1"
                // 判断用户是否输入了昵称
            if (nickName.trim().length == 0) {
                alert('请输入昵称')
                return;
            }
            // 判断用户是否输入了邮箱地址
            if (email.trim().length == 0) {
                alert('请输入邮箱')
                return;
            }
            // 判断用户是否输入了密码
            if (password.trim().length == 0) {
                alert('请输入密码');
                return;
            }


            $.ajax({
                method: 'post',
                url: '/users',
                data: {
                    nickName: nickName,
                    email: email,
                    password: password,
                    role: role,
                    status: status,
                },
                success: function(response) {

                    // 注册成功 跳转到登录页面
                    location.href = 'login.html';
                },
                // error: function() {
                //     // 注册失败
                //     alert('用户名或者密码错误')
                // }
            })

        });
    </script>
</body>

</html>